<script setup>
import { ref, reactive, onMounted } from 'vue'
// 逻辑代码
import { useRouter } from "vue-router";
import { getData } from "@/api/category";
import { imgUrls } from "@/network/request";

const router = useRouter();
const list = ref([]);
const isActive = ref(0);
const active = ref(0);
const data = ref([]);

const navclick = (id, index) => {
  isActive.value = index;
  let new_list = []
  list.value.forEach(r => {
    r.children.forEach(res => {
      if (res.pid === id) {
        new_list.push(res)
      }
    })
  })
  data.value = new_list
}
const getList = () => {
  getData().then(res => {
    // console.log("后端返回的分类数据：", res.data);
    list.value = res.data
    navclick(list.value[0].id, 0)
  })
}
// 获取右侧选中的商品的数据
const getItem = data => {
  router.push({
    name: 'ProductList',
    querry: {
      sid: data.id
    }
  })
}
onMounted(() => {
  getList()
})
</script>

<template>
  <div style="margin-top: 10px;">
    <div class="va"></div>
    <van-row gutter="10">

      <van-col span="8" style="min-height: 300px;background-color: #fff;">
        <van-cell v-for="(item, index) in list" :title="item.cateName" :key="index" @click="navclick(item.id, index)"
          :class="{ active: index === isActive }" />
      </van-col>

      <van-col span="15" style="min-height: 300px;background-color: #fff;margin-left: 4px;">
        <van-grid :column-num="3" class="classify" :border="false">
          <template v-for="(item, index) in data">
            <van-grid-item :to="'/ProductList?sid=' + item.id" v-if="data.length > 0">
              <van-image :src="imgUrls + item.pic" round />
              <span style="font-size: 13px;">
                {{ item.cateName }}
              </span>
            </van-grid-item>
          </template>
        </van-grid>
      </van-col>

    </van-row>

  </div>
</template>

<style scoped>
.va {
  background-color: #ffffff;
  height: 92%;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}

.active {
  background-color: #fff3e0;
  font-weight: bold;
  border-left: 4px solid #ff6634;
}
</style>